<template>
    <div>
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left">
					<i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
			</div>
			<div class="header_input">
				<i class="iconfont">&#xe680;</i>
				<input type="search" v-model="want" 
				 placeholder="输入你想要查找的" id="textfiled"/>
			</div>
			<div class="header_right">
				<em class="baiColor" @click="sousuo">搜索</em>
			</div>
		</div>
		<div style="padding-top: 47px;">
			<div class="content">
				<div class="container">
					<p>热门搜索</p>
					<div class="jilu">
						<span v-for="(data,index) in arr">{{data.search_content}}</span>
					</div>
				</div>
				
				<div class="info" style="margin-top: 20px;" v-if="content != ''">
					<section>
						<div class="cont">
							<!--文章的图片动态路径-->
							<img :src="imgURL+content.new_img" />
							<div class="rightW">
								<!--根据文章id改动态路径-->
								<router-link :to="{name:'xiangqing',params:{id:content.new_id}}" class="tit">
									<h4 v-text="content.new_title"></h4>
									<p class="jie ellipsis02 index-jie" v-html="content.new_content"></p >
								</router-link>
								
							</div>
						</div>
					</section>
				</div>
			</div>
		</div>
    </div>

</template>


<script>
    export default{
        data(){
            return {
            	imgURL:this.imgURL,
				arr : [],
				//把搜索的内容需要向后端发送数据
				want:'',
				//搜索到的内容
				content:[],
            }
        },
        mounted:function(){
			//热门搜索
			var params = new URLSearchParams();
			var info = window.localStorage.data;
			params.append('token', info);
			this.$axios({
			   	url:"Home/New/hot_topic",
				method:"POST",
				data:params
			 }).then((res)=>{
				if(res.data.code == 1){
					var datas = res.data.data
					this.arr = datas	
				}else if(res.data.code == 2){
					this.arr = []
				}
			}).catch(function(err){
				console.log(err)		
			})
       },
       methods:{
	       	sousuo:function(){
				var info = window.localStorage.data;
				var params = new URLSearchParams();
				params.append('search',this.want)
				this.$axios({
				   	url:"Home/New/search",
					method:"POST",
					data:params
				 }).then((res)=>{
					if(res.data.code == 2){
						alert('查找信息不存在')
					}
					//   查找成功后应该还有信息
					if(res.data.code == 1){
						console.log(res.data.data)
						this.content = res.data.data[0]
					}
				}).catch(function(err){
					console.log(err)		
				})
				
	       	}
       }
    }

</script>

<style scoped="scoped">
@import "../css/public.css";
.header_input{
	background: #fff;
	position: relative;
}
.header_input i{
	font-size: 17px;
	padding: 8px;
	opacity: 0.6;
	position: absolute;
	top: -3px;
}
.header_input input{
	width: 85%;
	color: #999;
	font-size: 12px;
	line-height: 26px;
	opacity: 0.6;
	margin-left: 32px;
}
.content{
	width: 95%;
	margin: 0 auto;
	background: #fff;
}
.info{
	padding: 10px;
	font-size: 16px;
}
.content .container{
	padding: 10px;
	position: relative;
}
.content .container .b{
	position: absolute;
	bottom: 28px;
	right: 20px;
	color: #666;
}
.content .container p{
	color: #999;
	font-size: 14px;
}
.content .container .jilu{
	margin: 20px 0 10px;
	width: 100%;
}
.content .container .jilu span{
	display: inline-block;
	font-size: 14px;
	color: #fff;
	border-radius: 3px;
	background: #F3961F;
	padding: 6px 10px;
	margin: 4px;
}

section {
		width: 100%;
		height: 108px;
		margin: 0px auto;
	}
	
	section .cont{
		width: 100%;
		margin: 0 auto;
		overflow: hidden;
	}
	section img {
		float: left;
		height: 98px;
		margin-top: 5px;
		width: 30%;
		border-radius: 5px;
	}
	
	section .rightW {
		padding: 5px 0;
		width: 68%;
		float: right;
		height: 108px;
	}
	
	section .rightW h4{
		color: #333;
		font-size: 16px;
		margin-bottom: 15px;
	}
	
	section .rightW .jie {
		color: #666;
		font-size: 12px;
		line-height: 20px;
		height:42px;
	}

</style>
